<template>

	<view class="tabbar">
		<view class="tab" v-for="(item,index) in tabbarList" :key='index' @tap='navigateTo(item.pagePath)'>
			<image v-if='item.pagePath===cureentPage' :src="item.selectedIconPath" mode=""></image>
			<image v-else :src="item.iconPath" mode=""></image>
			<view class="text">{{item.text}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			cureentPage: {
				type: String,
				default: 'index'
			}
		},
		data() {
			return {
				tabbarList: [{
						"iconPath": "/static/syw.png",
						"selectedIconPath": "/static/syd.png",
						"pagePath": "index",
						"text": "首页"
					},
					{
						"iconPath": "/static/fxw.png",
						"selectedIconPath": "/static/fxd.png",
						"pagePath": "finding",
						"text": "发现"
					},
					{
						"iconPath": "/static/sbw.png",
						"selectedIconPath": "/static/sbd.png",
						"pagePath": "guide",
						"text": "识别"
					},
					{
						"iconPath": "/static/scw.png",
						"selectedIconPath": "/static/scd.png",
						"pagePath": "shopping",
						"text": "商城"
					},

					{
						"iconPath": "/static/grw.png",
						"selectedIconPath": "/static/grd.png",
						"pagePath": "my",
						"text": "个人"
					}
				]
			}
		},
		methods: {
			navigateTo(e) {
				if(e == 'guide'){
					uni.redirectTo({
						url: `../../pages/guide/sort/sort`,
						//animationType:"fade-in",
					
						animationDuration: 0,
					})
				}else{
						uni.redirectTo({
						url: `../../pages/${e}/${e}`,
						//animationType:"fade-in",

						animationDuration: 0,
					})
				}
				

			}

		}

	}
</script>

<style scoped>
	.tabbar {

		border-top: 2rpx solid #636263;
		background-color: #FFFFFF;
		z-index: 9999;
		position: sticky;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 120rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;


	}

	.tab {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	image {
		width: 40rpx;
		height: 40rpx;

	}

	.text {
		padding: 10rpx 0;
		font-size: 24rpx;
	}
</style>